<template>
  <div :class="[inline ? 'menuContentInline' : 'menuContent']">
    <div
      :class="['menuItem', isActive(item.path || item.value) && 'activeItem']"
      :style="isHeader && 'padding: 30px 0;'"
      v-for="item in structure"
      @click="handleMenuClick(item)"
    >
      <img :src="getImageUrl(isActive(item.path || item.value) ? `${item.label}1` : item.label)" alt="">
      <div>{{ t('menu', item.label) }}</div>
      <div class="menuNum" v-if="messages[item.label]">{{ messages[item.label] }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { t } from '@/i18n'

const route = useRoute()
const router = useRouter()

const { modelValue, structure, messages, inline, jump, isHeader } = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  structure: {
    type: Array,
    default: [],
  },
  messages: {
    type: Object,
    default: {},
  },
  inline: {
    type: Boolean,
    default: false,
  },
  isHeader: {
    type: Boolean,
    default: false,
  },
  jump: {
    type: String,
    default: 'push',
  }
})
console.log(structure, messages)
const images = import.meta.glob('@/assets/menuIcon/*.png', { eager: true })
const getImageUrl = name => {
  const path = `/src/assets/menuIcon/${name}.png`
  return images[path]?.default
}
const emits = defineEmits()
const handleMenuClick = (item) => {
  switch (jump) {
    case 'push':
      router.push( { path: item.path,query:item.query } )
      break
    case 'replace':
      router.replace( { path: item.path,query:item.query } ) 
      break
    case 'none':
      emits('update:modelValue', item.value)
      break
  }
  emits('handleMenuClick', item)
}

const isActive = currentVal => {
  switch (jump) {
    case 'push':
    case 'replace':
      for (let i of route.matched) {
        if (currentVal == i.path) return true
      }
      return false
    case 'none':
      if (currentVal == modelValue) return true
      break
  }
  
} 
</script>

<style lang="scss" scoped>
$mainColor: #615CED;
* {
  box-sizing: border-box;
}
.menuContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* padding: 4px; */
  .menuItem {
    position: relative;
    cursor: pointer;
    color: rgba($color: #000000, $alpha: 0.88);
    min-width: 200px;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    padding-left: 26px;
    font-size: 14px;
    margin-top: 10px;
    transition: all .3s;
    &:hover {
      /* color: white; */
      background-color: rgba($color: #f0f0f0, $alpha: 0.8);
    }
    img {
      max-width: 20px;
      max-height: 20px;
      margin-right: 11px;
    }
    .menuNum {
      position: absolute;
      right: 10px;
      width: 30px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 20px;
      background-color: #ff454a;
      margin-right: 8px;
      color: #fff;
    }
  }
  & .activeItem {
    color: white;
    background-color: rgba($color: $mainColor, $alpha: 1);
    &:hover {
      background-color: rgba($color: $mainColor, $alpha: 1) !important;
    }
  }
}
.menuContentInline {
  flex-grow: 1;
  overflow: auto;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: nowrap;
  .menuItem {
    min-width: 0;
    position: relative;
    cursor: pointer;
    color: rgba($color: #000000, $alpha: 0.88);
    padding: 16px 0;
    /* height: 40px; */
    /* min-width: 80px; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-right: 50px;
    transition: all .3s;
    border-bottom: 2px solid transparent;
    &:hover {
      border-bottom: 2px solid $mainColor;
    }
  }
  & .activeItem { 
    border-bottom: 2px  solid $mainColor;
    color: $mainColor;
  }
}

</style>
